<template>
  <div class="container">
    <Navbar title="设置"></Navbar>
    <div class="group-box">
      <a :href="config.user_private_protocol" target="_blank" class="group-item">用户协议</a>
      <a :href="config.user_private_protocol" target="_blank" class="group-item">隐私协议</a>
      <a :href="config.aboutus" target="_blank" class="group-item">关于我们</a>
    </div>
    <div style="margin: 16px;" v-if="this.$store.state.user.isLogin && finish">
      <van-button round block type="info" native-type="submit" @click="logout">安全退出</van-button>
    </div>
    <div class="copyright">
      <p>Copyright 2022.</p>
      <span v-if="finish">{{config.webname}} 版权所有</span>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar';
import { getOtherConfig } from '@/network/member';
import { Notify } from 'vant';

export default {
  components: {
    Navbar,
  },
  data() {
    return {
      finish: false,
      config: {},
    };
  },
  methods: {
    logout() {
      Notify({ type: 'success', message: '已安全退出' });
      localStorage.setItem('token', '');
      this.$store.commit('setIsLogin', false);
    },
  },
  created() {
    getOtherConfig().then((res) => {
      this.config = res.data;
      this.finish = true;
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-color: #f6f6f6;
  .group-box {
    margin: 16px 0;
    background-color: #fff;
    .group-item {
      display: flex;
      align-items: center;
      height: 52px;
      padding: 0 14px;
      font-size: 15.2px;
      border-bottom: 1px solid rgba(0, 0, 0, .04);
    }
  }
  .copyright {
    text-align: center;
    font-size: 12px;
    margin-top: 88px;
    color: rgba(0, 0, 0, .4);
    line-height: 20px;
  }
}
</style>
